@backColor: #f1f2f3;
@darkBackColor: #2a2a2a;

.kaitify {
  table {
    display: table;
    width: 100%;
    border: 1px solid var(--kaitify-border-color);
    border-collapse: collapse;
    margin: 0 0 var(--kaitify-large-margin) 0;

    td {
      border: 1px solid var(--kaitify-border-color);
      padding: var(--kaitify-padding);
      vertical-align: middle;
      max-width: 100%;
      min-width: 50px;
    }

    tr:first-child {
      background: @backColor;

      td {
        font-weight: bold;
      }
    }

    tr:nth-child(2n + 3) {
      background: fade(@backColor, 20);
    }
  }

  //非编辑状态下
  &:not([contenteditable='true']) {
    table {
      tr:not(:first-child) {
        transition: background 300ms;

        &:hover {
          background: fade(@backColor, 50);
        }
      }
    }
  }

  &.kaitify-dark {
    table {
      tr:first-child {
        background: @darkBackColor;

        td {
          font-weight: bold;
        }
      }

      tr:nth-child(2n + 3) {
        background: fade(@darkBackColor, 20);
      }
    }

    //非编辑状态下
    &:not([contenteditable='true']) {
      table {
        tr:not(:first-child) {
          transition: background 300ms;

          &:hover {
            background: fade(@darkBackColor, 50);
          }
        }
      }
    }
  }
}
